<template>
  <div class="menu-box">
    <el-menu
        :default-active=active
        class="el-menu-demo"
        mode="horizontal"
        router
    >
      <el-menu-item index="/users">全部员工</el-menu-item>
      <el-menu-item index="/manage">员工注册</el-menu-item>
    </el-menu>
  </div>
  <router-view/>
</template>

<script setup>
import Manage from "@/components/UserManage/Manage.vue";
import {ElMenu, ElTableColumn} from "element-plus";
import emitter from "@/lib/eventBus"
import {useRouter} from "vue-router"
import {ref} from "vue-demi"


const router = useRouter()
const active = ref('/users')

emitter.emit('home_menu','/flow')
emitter.on('updateManageMenu',(target)=>{
  active.value = target
})
</script>

<style scoped lang="less">
.el-menu--horizontal.el-menu{
  padding:1vh 2vw;
  margin: 2vh 0;
}
.el-menu--horizontal>.el-menu-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 2vw;
  border-bottom: 2px solid transparent;
  color: var(--el-menu-text-color);
}
/deep/.el-menu--horizontal > .el-menu-item[data-v-25a743c4] {
  font-size: large !important;
  font-weight: 800;
  color: gray;
}
</style>
